<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
pageContext.setAttribute("ctx",basePath);
pageContext.setAttribute("ctxTitle","页面顶部");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <base href="${ctx}">
    
    <title>${ctxTitle }</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
        textarea
        {
            height: 118px;
            width: 280px;
        }
         .panel
        {
            padding: 20px;
            background-color: #000066;
            color: #FFFFFF;
            font-weight: bold;
            width: 200px;
            height: 50px;
        }
        div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px; 
        background:green; display:none; }
  div.newcolor { background:blue; }
  span { color:red; }
    </style>
	
	<link href="css/layout.css" rel="stylesheet" type="text/css" />
  </head>
  
  <body>
  <div id="header"><%--
    <input value="1" /> + 
    <input value="2" />
    <input type="button" value="=" />
    <label>&nbsp;</label>
  <textarea></textarea>
    <div id='result'></div> --%>
    <script type="text/javascript">
   jQuery("input[type='button']").click(function(){
            var i = 0;
            jQuery("input[type='text']").each(function(){
                i += parseInt(jQuery(this).val());
            });
            jQuery('label').text(i);
        });
        jQuery('input:lt(2)')
            .add('label')
            .css('border','none')
            .css('borderBottom','solid 1px navy')
            .css({'width':'30px'});
        /*事件类*/
     $(function(){
            $('textarea').bind('change',function(){
                $('#result').html($('textarea').val())
            }
            ).bind('change',function(){
                alert($('textarea').val());
            });
        });
/*链条代码*/
  /*
$(function(){
            //添加四个按钮
          $('<input type="button" value="click me"/><input type="button" value="triggle click me"/><input type="button" value="detach handler"/><input type="button" value="show/hide text"/>').appendTo($('body'));
            //找出所有按钮
            $('input[type="button"]')
                .eq(0)//找到第一个按钮
                    .click(function(){
                        alert('you clicked me!');
                    })
                .end().eq(1)//返回所有按钮，再找到第二个
                    .click(function(){
                        $('input[type="button"]:eq(0)').trigger('click');
                    })
                .end().eq(2)//返回所有按钮，再找到第三个
                    .click(function(){
                        $('input[type="button"]:eq(0)').unbind('click');
                    })
                .end().eq(3)//返回所有按钮，再找到第四个
                    .toggle(function(){
                        $('.panel').hide('slow');
                    },function(){
                        $('.panel').show('slow');
                    });
        });*/
/*
 * 动画
 * */
 $(document).ready(function(){
    
    $("#show").click(function () {
      var n = $("div").queue("fx");
      $("span").text("Queue length is: " + n.length);
    });
    function runIt() {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").slideToggle(1000);
      $("div").slideToggle("fast");
      $("div").animate({left:'-=200'},1500);
      $("div").hide("slow");
      $("div").show(1200);
      $("div").slideUp("normal", runIt);
    }
    runIt();

  });

    </script>
    
</div>
<button id="show">Show Length of Queue</button>
  <span></span>
  <div></div>

  </body>
</html>
